<template>
	<div class="header-container">
		<div class="title">
			<div class="title-left">
				<img src="../../assets/header/logo3.png" />
				<div>
					<p>中文出版集团北京图书报刊有限公司</p>
					<span>www.zwcbtsbk.com</span>
				</div>
			</div>
			<div class="title-right">
				<!-- <img src="@/assets/header/公众号.jpg" alt="">
		  <img src="@/assets/header/douyin.png" alt=""> -->

				<div class='first'>
					<!-- <div class="text">公众号</div> -->
				</div>
				<div class='second'>
					<!-- <div class="text">抖音号</div> -->
				</div>
				<div class='third'>
					<!-- <div class="text">视频号</div> -->
				</div>
			</div>
		</div>
		<div class="navi">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
				<el-menu-item index="1" :route="{ path: '/', query: { } }">首页</el-menu-item>
				<el-menu-item index="2" :route="{ path: '/company', query: { } }">公司介绍</el-menu-item>
				<el-menu-item index="3" :route="{ path: '/pressflow', query: { } }">出版流程</el-menu-item>
				<el-menu-item index="4" :route="{ path: '/comsense', query: { } }">出版常识</el-menu-item>
				<el-menu-item index="5" :route="{ path: '/newbook', query: { } }">新书展示</el-menu-item>
				<el-menu-item index="6" :route="{ path: '/publish', query: { } }">合作出版社</el-menu-item>
				<!-- <el-menu-item index="7"  :route="{ path: '/login', query: { } }">登录</el-menu-item> -->
			</el-menu>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			naviIndex:{type:String}
		},
		data() {
			return {
				activeIndex: this.naviIndex,
				activeIndex2: '1'
			};
		},
		mounted(){
			console.log(this.naviIndex);
		},
		methods: {
			handleSelect(key, keyPath) {
				// console.log(key, keyPath);
			}
		},
	
	}
</script>

<style scoped>
	.header-container {
		height: 180px;
		/* width: 100%; */
		width: inherit;
		display: flex;
		flex-direction: column;
	}

	.title {
		flex: 1;
		display: flex;
		flex-direction: row;
		background: url("../../assets/header/bg-header.png") 100% 100%;
		background-repeat: no-repeat;
		/* padding: 10px 0; */
	}

	.title>div:first-child {
		flex: 3;

		/* margin-left:150px; */
	}

	.title>div:last-child {
		flex: 1;

		/* margin-left:150px; */
	}

	.title-left {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title-left img {
		height: 120px;
		width: 120px;
		margin-left: 150px;
	}

	.title-left>div {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 30px;
	}

	.title-left p {
		margin: 0;
		padding: 0;
		color: #24797d;
		font-size: 30px;
		font-weight: bold;
	}

	.title-left span {
		margin: 0;
		padding: 0;
		color: #24797d;
		font-size: 20px;
	}

	.title-right {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding-right: 150px;
	}

	.title-right>div {
		height: 80px;
		width: 80px;
		/* border-radius: 100px; */
		position: relative;
	}

	.title-right .text {
		position: absolute;
		bottom: -18px;
		left: 15px;
		font-size: 12px;
		color: #24797d;
	}


	.title-right .first {
		background: url('@/assets/header/公众号.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		margin-right: 20px;
	}

	.first::after {
		content: '公众号';
		position: absolute;
		bottom: -20px;
		left: 20px;
		font-size: 12px;
	}

	.title-right .second {
		background: url('@/assets/header/douying2.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-right: 20px;
	}

	.second::after {
		content: '抖音号';
		position: absolute;
		bottom: -20px;
		left: 20px;
		font-size: 12px;
	}

	.title-right .third {
		background: url('@/assets/header/视频号.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.third::after {
		content: '视频号';
		position: absolute;
		bottom: -20px;
		left: 20px;
		font-size: 12px;
	}


	.navi {
		height: 50px;
		background-color: #24797d;
		display: flex;
		align-items: center;
	}
</style>

<style>
	.el-menu {
		margin-left: 150px;
		background: none !important;
		height: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
	}

	.el-menu .el-menu-item {
		background: transparent !important;
		color: white !important;
		height: auto !important;
		line-height: 1.5 !important;
	}

	.el-menu-item:hover {

		/* background-color: transparent !important; */
		background: none !important;
		color: white !important;

	}

	.el-menu--horizontal>.el-menu-item.is-active {
		border-bottom: 0.01042rem solid white;
		color: white;
		border-bottom: 1px solid white !important;

		/* background-color: transparent; */
	}

	.el-menu--horizontal>.el-menu-item {
		height: 30px;
		line-height: 30px;
		/* background: transparent; */
		color: white;
		font-size: 22px !important;

	}

	.el-menu.el-menu--horizontal {
		border: none;
	}
</style>
